<template>
	<!-- 搜索 -->
	<view>
		<view class="" :style="{paddingTop:h +'px' }" style="background-color: #fff;"></view>
		<view class="head flex align-center">
			<text class="cuIcon-back" @click="handleback"></text>
			<view class="search flex-cb">
				<image class="img1" src="/static/search.png" mode="widthFix"></image>
				<text @click="selectScope()">{{district?district:city?city:'全国'}}</text>
				<input type="text" placeholder="商品名称可搜索，例：输入“鱼” " :value="inputdata" @input="handleinput">
				<image class="img2" src="/static/x.png" mode="widthFix" @click="handleclose"></image>
			</view>
		</view>
		<view style="width: 100%;height: 20rpx;background-color: #fff;"></view>
		
		<scroll-view scroll-y="true" v-if="goods.length != 0" class="screen-swiper" @scrolltolower="scrolltolower" :style="{height:'calc(100vh - ' + (h+54) +'px)' }">
			<view class="list">
				<view class="recommend_list flex justify-between">
					<view class="itemlist  " v-for="(item,index) in goods" :key="index">
						<image :src="url+item.main_images[0]" mode=""></image>
						<view class="text">{{item.name}}</view>
						<view class="Price">
							<text class="Price_num">原价:￥{{item.sku.spec_list[0].item_list[0].price||item.service.price}}</text>
							<text class="numbar">销量{{item.sales}}</text>
						</view>
						<view class="MemberPrice flex align-start justify-between" @click="cart(index)">
							<text>会员价:￥{{item.sku.spec_list[0].item_list[0].vip_price||item.service.vip_price}}</text>
							<!-- 点击购物车图标 -->
							<image src="/static/gwc.png"  mode=""></image>
						</view>
						<view class="integral" v-if="item.service.point_deduct_amount != 0&&item.service.point_deduct_amount">
						{{item.service.point_deduct_max_amount/(item.service.point_deduct_amount/100)}}积分抵扣￥{{item.sku.spec_list[0].item_list[0]['point_deduct_max_amount']||item.service.point_deduct_max_amount||0}}
						</view>
						<view class="integral" v-if="item.sku.spec_list[0].item_list[0]['100_point_deduct_amount'] != 0&&item.sku.spec_list[0].item_list[0]['100_point_deduct_amount']">
							{{item.sku.spec_list[0].item_list[0]['point_deduct_max_amount']/(item.sku.spec_list[0].item_list[0]['100_point_deduct_amount']/100)}}积分抵扣￥{{item.sku.spec_list[0].item_list[0]['point_deduct_max_amount']||item.service.point_deduct_max_amount||0}}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="flex-c nodata" v-else :style="{height:'calc(100vh - ' + (h+54) +'px)' }" >
			<nodata />
		</view>
		<view class="modal_view" @click="iscart = 0" v-if="iscart">
			<view class="cart2" @click.stop="">
				<view class="img_title2 flex">
					<image :src="url+goods[indexs].main_images[0]" mode=""></image>
					<view>
						<view class="title2">{{goods[indexs].name}}</view>
						<view class="money2 flex align-center">
							<text>￥{{goods[indexs].sku.spec_list[0].item_list[jj].price}}</text>
							<text class="vipPrice2">会员价￥{{goods[indexs].sku.spec_list[0].item_list[jj].vip_price}}</text>
						</view>
						<text class="Selected2">已选：“
							<text v-for="(a,q) in arr" :key="q">
								{{a.name+','}}
							</text>
						”</text>
					</view>
				</view>
				<view class="solid"></view>
				<view class="type2 " v-for="(i,j) in goods[indexs].sku.spec_list" :key="j">
					<text>{{i.spec_name}}</text>
					<view class="flex">
						<view v-for="(item,index) in i.item_list" :key="index" class="item2 " 
						:class="{item1:index==jj}" @click.stop="jj = index">{{item.item_name}}</view>
					</view>
				</view>
				<view class="type2 " v-for="(i,j) in goods[indexs].sku.attribute_list" :key="j">
					<text>{{i.attribute_name}}</text>
					<view class="flex">
						<view v-for="(t,p) in i.name" :key="p" class="item2 " 
						:class="{item1: arr[j].name == i.name[p]}" @click.stop="handleArr(t,j)">{{t}}</view>
					</view>
				</view>
				<!-- arr[j].attribute_name == i.attribute_name && -->
				<view class="solid"></view>
				<view class="num2 flex-cb">
					<text>数量</text>
					<view class="num_div flex-cb">
						<view @click.stop="__num">-</view>
						<view class="addnum">{{num}}</view>
						<view @click.stop="addNum">+</view>
					</view>
				</view>
				<view class="flex-c button"  @click="handlecart">加入购物车</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url:'',
				h:0,
				jj:0,
				isdata:0,
				iscart:0,
				indexs:0,
				inputdata:'',
				mch_id:'',
				goods:[],
				arr:[],
				num:1,
				ismch:0,
				city:'',
				district:'',
				page:1,
				limit:10,
				last_page:1
			};
		},
		onLoad(e) {
			// this.city = getApp().globalData.city
			// this.district = getApp().globalData.district
			console.log(e,'eeeeeee');
			if(e.city){
				this.city = e.city;
			}
			if(e.district){
				this.district = e.district;
			}
			if(JSON.stringify(e) == '{}'){
				this.city = getApp().globalData.city
				this.district = getApp().globalData.district
			}
			this.url = this.$base
			if(e.mch_id){
				this.mch_id = e.mch_id
				this.ismch = 1
			}
			uni.getStorage({
				key:'height',
				success:(res)=>{
					this.h = res.data
				}
			})
		},
		methods:{
			selectScope(){
				uni.redirectTo({
					url: '/pageB/index/location?backUrl=/pageB/index/search'
				})
			},
			handleback(){
				uni.navigateBack({
					delta:1
				})
			},
			handleinput(e){
				this.inputdata = e.detail.value
				if(this.ismch == 1){//搜索店内商品
					this.$api.merchants_search({},this.mch_id,this.inputdata,1).then(res=>{
						console.log(res);
						if(res.data){
							this.isdata = 1
							this.goods = res.data
						}else{
							this.isdata = 0
						}
					})
				}else{
					this.getlist()
				}
			},
			getlist(i){
				console.log("信息打印1111111111111111",this.city,this.district)
				this.$api.user_search({
					page:this.page,
					limit:this.limit,
					city:this.city,
					district:this.district
				},this.inputdata,1).then(res=>{
					console.log(res);
					if(res.list){
						this.isdata = 1
						if(i==1){
							this.goods = [...this.goods,...res.list]
						}else{
							this.goods = res.list
						}
					}else{
						this.isdata = 0
					}
				})
			},
			scrolltolower(){
				if(this.ismch != 1){
					if(this.page == this.last_page){
						return
					}else{
						this.page++
						this.getlist(1)
					}
				}
			},
			cart(t){
				if(this.ismch == 1||this.goods[t].merchant.main_id != 2){
					this.iscart = 1
					this.indexs = t
					this.arr = []
					this.arr = JSON.parse(JSON.stringify(this.goods[t].sku.attribute_list));
					for (let i = 0; i < this.arr.length; i++) {
						this.arr[i].name.splice(1,3)
					}
					return
				}else{
					uni.navigateTo({
						url:'/pageB/meifa_details/meifa_details?id='+this.goods[t].id
					})
				}
			},
			handlecart(id){//加入购物车
				let newarr = []
				for (let i = 0; i < this.arr.length; i++) {
					newarr[i] =  this.arr[i].name[0]
				}
				// if(newarr.length != 0){
					if(this.ismch == 1){//加购点餐商品
						this.$api.ADD_cart({
							spec_name:this.goods[this.indexs].sku.spec_list[0].spec_name,
							spec_item_name:this.goods[this.indexs].sku.spec_list[0].item_list[this.jj].item_name,
							attribute_name:newarr,
							number:this.num,
							type:2
						},this.goods[this.indexs].id,1).then(res=>{
							console.log(res);
							if(res.code == 200001){
								uni.showToast({
									icon:'none',title:"加购成功"
								})
								
							}
							this.iscart = 0
							this.num = 1
						})
					}else{
						this.$api.ADD_cart({
							spec_name:this.goods[this.indexs].sku.spec_list[0].spec_name,
							spec_item_name:this.goods[this.indexs].sku.spec_list[0].item_list[this.jj].item_name,
							attribute_name:newarr,
							number:this.num,
							type:1
						},this.goods[this.indexs].id,1).then(res=>{
							console.log(res);
							if(res.code == 200001){
								uni.showToast({
									icon:'none',title:"加购成功"
								})
							}
							this.iscart = 0
							this.num = 1
						})
					}
				// }
				
			},
			handleArr(t,j){//选择属性
				this.arr[j].name = t
			},
			__num(){
				if(this.num != 1){
					this.num--
				}else{
					uni.showToast({
						icon:"none",
						title:'不能再少了~'
					})
				}
			},
			addNum(){
				if(this.num != 1000){
					this.num++
				}else{
					uni.showToast({
						icon:"none",
						title:'不能贪心哦~'
					})
				}
			},
			handleclose(){//清除输入框
				this.inputdata = ''
			}
		},
		
	}
</script>

<style lang="scss">
.head{
	height: 88rpx;
	background-color: #fff;
	padding: 5rpx 0 7rpx 21rpx;
	.cuIcon-back{
		font-size: 38rpx;
	}
	.search{
		width: 472rpx;
		height: 72rpx;
		margin-left: 20rpx;
		padding-left: 21rpx;
		padding-right: 25rpx;
		border-radius: 36rpx;
		background: #F8F8F8;
		.img1{
			width: 25rpx;
			height: 25rpx;
		}
		input{
			font-size: 24rpx;
			margin: 0 10rpx;
			flex: 1;
		}
		.img2{
			width: 31rpx;
			height: 31rpx;
		}
		text{
			font-size: 24rpx;
			margin-left: 10rpx;
			max-width: 100rpx;
			overflow: hidden;
			white-space: nowrap;
		}
	}
}

.screen-swiper{
	.recommend_list{
			padding: 27rpx 22rpx 0 22rpx;
			flex-wrap: wrap;
			.itemlist{
				width: 346rpx;height: 610rpx;
				background-color: #fff;
				border-radius: 10rpx;
				margin-bottom: 14rpx;
				view{
					margin-left: 12rpx;
				}
				image{
					width: 346rpx;
					height: 336rpx;
				}
				.text{
					// width: 305rpx;
					height: 90rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;line-height: 50rpx;
					margin-bottom: 11rpx;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.Price{
					white-space: nowrap;
					.Price_num{
						width: 167rpx;
						font-size: 26rpx;
						margin-top: 2rpx;
					}
					.numbar{
						font-size: 22rpx;
						color: #999999;
						margin-left: 70rpx;
						white-space: nowrap;
					}
				}
				.MemberPrice{
					color: #FF2E2E;	
					font-size: 30rpx;
					font-weight: bold;
					height: 42rpx;
					margin-top: 15rpx;
					image{
						width: 60rpx;
						height: 60rpx;
						margin-right: 10rpx;
					}
				}
				.integral{
					color: #FF6F10;
					margin-top: 13rpx;
					font-size: 22rpx;
				}
			}
			
		}
}
.nodata{
	background-color: #fff;
	image{
		width: 206rpx;
		height: 274rpx;
	}
}
.cart2{
	width: 750rpx;
	min-height: 970rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 0px 0px;
	position: fixed;
	bottom: 0;
	padding-bottom: 24rpx;
	.img_title2{
		margin: 15rpx 0 0 30rpx;
		image{
			width: 240rpx;height: 240rpx;
			margin-right: 20rpx;
		}
		.title2{
			width: 408rpx;
			max-height: 108rpx;
			font-size: 34rpx;
			display: inline-block;
			font-weight: 400;
			color: #000000;
			line-height: 60rpx;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.money2{
			height: 70rpx;
			margin-top: 8rpx;
			font-weight: bold;
			font-size: 50rpx;
			color: #333;
			.vipPrice2{
				margin-left: 9rpx;
				font-size: 30rpx;
				color: #FF2E2E;
			}
		}
		.Selected2{
			font-size: 28rpx;
			color: #999;
		}
	}
	.solid{
		width: 720rpx;
		margin: auto;
		margin-top: 32rpx;
	}
	.type2{
		padding: 23rpx 0 7rpx 28rpx;
		margin-bottom: 56rpx;
		text{
			font-size: 32rpx;
			color: #333;
		}
		.flex{
			margin-top: 22rpx;
			font-size: 28rpx;
			.item2{
				text-align: center;
				line-height: 60rpx;
				width: 120rpx;
				height: 60rpx;
				background: #F2F2F2;
				margin-right: 20rpx;
				border-radius: 10rpx;
				color: #999999;
			}
			.item1{
				background: #1CD699;
				color: #fff;
			}
		}
	}
	.num2{
		padding: 31rpx 30rpx 0 28rpx;
		text{
			font-size: 32rpx;
			color: #333;
		}
		.num_div{
			view{
				width: 60rpx;
				height: 60rpx;
				background: #F2F2F2;
				text-align: center;
				line-height: 60rpx;
				border-radius: 10rpx;
			}
			.addnum{
				width: 100rpx;
				margin: 0 20rpx;
			}
		}
	}
	.button{
		width: 690rpx;
		height: 74rpx;
		background: #1CD699;
		border-radius: 37rpx;
		color: #fff;
		margin: auto;
		margin-top: 70rpx;
	}
}
</style>
